Progresyviosios žiniatinklio programėlės: išsamus diegimo vadovas pasaulio programuotojams

Progresyviosios žiniatinklio programėlės (PWA) reiškia paradigmos pokytį žiniatinklio kūrime, ištrindamos ribas tarp tradicinių svetainių ir savųjų mobiliųjų programėlių. Jos siūlo patobulintą vartotojo patirtį, pasižyminčią patikimumu, įdiegiamumu ir įtraukimu, todėl yra idealus sprendimas pasiekti pasaulinę auditoriją su skirtingu interneto ryšiu ir įrenginių galimybėmis.

Kas yra progresyviosios žiniatinklio programėlės?

PWA yra žiniatinklio programėlės, kurios naudoja šiuolaikinius žiniatinklio standartus, kad suteiktų savajai programėlei panašią patirtį. Jos yra:

• Patikimos: Įkeliamos akimirksniu ir veikia neprisijungus arba prastos kokybės tinkluose, naudojant „service workers“.
• Įdiegiamos: Gali būti pridėtos prie vartotojo pagrindinio ekrano, suteikiant savajai programėlei panašią patirtį.
• Įtraukiančios: Iš naujo įtraukia vartotojus su funkcijomis, tokiomis kaip tiesioginiai pranešimai.

Skirtingai nuo savųjų programėlių, PWA yra atrandamos per paieškos sistemas, lengvai dalijamos per URL ir nereikalauja, kad vartotojai eitų per programėlių parduotuves. Dėl to jos yra prieinamas ir ekonomiškas sprendimas įmonėms, siekiančioms išplėsti savo pasiekiamumą.

Pagrindinės PWA technologijos

PWA yra sukurtos remiantis trimis pagrindinėmis technologijomis:

1. HTTPS

Saugumas yra svarbiausia. PWA privalo būti teikiamos per HTTPS, kad būtų išvengta pasiklausymo ir užtikrintas duomenų vientisumas. Tai yra pagrindinis reikalavimas, kad „service workers“ veiktų.

2. Service Workers

„Service workers“ yra JavaScript failai, veikiantys fone, atskirai nuo pagrindinės naršyklės gijos. Jie veikia kaip tarpiniai serveriai (proxy) tarp žiniatinklio programėlės ir tinklo, įgalindami tokias funkcijas kaip:

• Spartinančioji atmintinė (Caching): Išteklių (HTML, CSS, JavaScript, paveikslėlių) saugojimas, siekiant užtikrinti prieigą neprisijungus ir greitesnį įkėlimo laiką.
• Fono sinchronizavimas (Background Sync): Leidžia atlikti veiksmus net tada, kai vartotojas yra neprisijungęs. Pavyzdžiui, vartotojas gali parašyti el. laišką neprisijungęs, o „service worker“ automatiškai jį išsiųs, kai įrenginys vėl prisijungs prie tinklo.
• Tiesioginiai pranešimai (Push Notifications): Laiku pateikiami atnaujinimai ir įtraukiantis turinys vartotojams, net kai jie aktyviai nenaudoja programėlės.

„Service Worker“ gyvavimo ciklas: Norint efektyviai įdiegti PWA, labai svarbu suprasti „service worker“ gyvavimo ciklą (registracija, diegimas, aktyvavimas, atnaujinimai). Neteisingas valdymas gali sukelti spartinančiosios atmintinės problemų ir netikėtą elgseną. Atnaujinimus išsamiau aptarsime vėliau.

3. Žiniatinklio programėlės manifestas (Web App Manifest)

Žiniatinklio programėlės manifestas yra JSON failas, kuriame pateikiami metaduomenys apie PWA, pavyzdžiui:

• Pavadinimas (Name): Programėlės pavadinimas, rodomas pagrindiniame ekrane.
• Trumpas pavadinimas (Short Name): Trumpesnė pavadinimo versija, naudojama, kai trūksta vietos.
• Piktogramos (Icons): Piktogramų rinkinys įvairių dydžių skirtingiems įrenginiams.
• Pradinis URL (Start URL): URL, kuris įkeliamas, kai vartotojas paleidžia PWA iš pagrindinio ekrano.
• Rodymas (Display): Nurodo, kaip PWA turėtų būti rodoma (pvz., atskirai (standalone), per visą ekraną (fullscreen), minimali vartotojo sąsaja (minimal-ui)). Atskiras režimas (standalone) pašalina naršyklės adreso juostą ir naršymo mygtukus, suteikdamas labiau savajai programėlei panašią patirtį.
• Temos spalva (Theme Color): Nustato naršyklės adreso juostos ir būsenos juostos spalvą.
• Fono spalva (Background Color): Nurodo fono spalvą, kuri bus naudojama, kol programėlė kraunasi.

Diegimo žingsniai: paprastos PWA kūrimas

Panagrinėkime paprastos PWA kūrimo žingsnius:

1 žingsnis: Nustatykite HTTPS

Įsitikinkite, kad jūsų svetainė teikiama per HTTPS. Nemokamą SSL sertifikatą galite gauti iš „Let's Encrypt“.

2 žingsnis: Sukurkite žiniatinklio programėlės manifestą (manifest.json)

Sukurkite failą pavadinimu `manifest.json` ir pridėkite šį kodą:

{
  "name": "Mano paprasta PWA",
  "short_name": "PWA",
  "icons": [
    {
      "src": "icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "theme_color": "#ffffff",
  "background_color": "#ffffff"
}

Pakeiskite `icon-192x192.png` ir `icon-512x512.png` savo tikrais piktogramų failais. Jums reikės sugeneruoti šias piktogramas įvairiais dydžiais. Tam gali padėti internetiniai įrankiai, pavyzdžiui, „Real Favicon Generator“.

3 žingsnis: Susiekite manifesto failą savo HTML

Pridėkite šią eilutę į savo `index.html` failo `` sekciją:

<link rel="manifest" href="/manifest.json">

4 žingsnis: Sukurkite „Service Worker“ (service-worker.js)

Sukurkite failą pavadinimu `service-worker.js` ir pridėkite šį kodą:

const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/style.css',
  '/script.js',
  '/icon-192x192.png',
  '/icon-512x512.png'
];

self.addEventListener('install', function(event) {
  // Atliekami diegimo veiksmai
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(function(cache) {
        console.log('Atidaryta spartinančioji atmintinė');
        return cache.addAll(urlsToCache);
      })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request)
      .then(function(response) {
        // Rastas atitikmuo spartinančiojoje atmintinėje - grąžinamas atsakymas
        if (response) {
          return response;
        }

        // SVARBU: Jei esame čia, tai reiškia, kad užklausa nebuvo rasta spartinančiojoje atmintinėje.
        return fetch(event.request).then(
          function(response) {
            // Patikriname, ar gavome galiojantį atsakymą
            if(!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            // SVARBU: Klonuokite atsakymą. Atsakymas yra srautas,
            // ir kadangi norime, kad naršyklė sunaudotų atsakymą,
            // o taip pat ir spartinančioji atmintinė, turime jį klonuoti, 
            // kad turėtume dvi nepriklausomas kopijas.
            var responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(function(cache) {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
  );
});

self.addEventListener('activate', function(event) {

  var cacheWhitelist = [CACHE_NAME];

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Šis „service worker“ diegimo metu išsaugo nurodytus failus spartinančiojoje atmintinėje ir pateikia juos iš jos, kai vartotojas yra neprisijungęs arba tinkle su lėtu ryšiu.

5 žingsnis: Užregistruokite „Service Worker“ savo JavaScript faile

Pridėkite šį kodą į savo `script.js` failą:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js')
      .then(function(registration) {
        // Registracija pavyko
        console.log('ServiceWorker registracija sėkminga, aprėptis: ', registration.scope);
      },
      function(err) {
        // registracija nepavyko :(
        console.log('ServiceWorker registracija nepavyko: ', err);
      });
  });
}

Šis kodas patikrina, ar naršyklė palaiko „service workers“, ir užregistruoja `service-worker.js` failą.

6 žingsnis: Išbandykite savo PWA

Atidarykite savo svetainę naršyklėje, kuri palaiko PWA (pvz., „Chrome“, „Firefox“, „Safari“). Atidarykite kūrėjo įrankius ir patikrinkite „Application“ (Programėlė) skirtuką, kad pamatytumėte, ar „service worker“ yra teisingai užregistruotas ir ar manifest failas yra įkeltas.

Dabar naršyklėje turėtumėte matyti raginimą „Pridėti į pagrindinį ekraną“. Paspaudus šį raginimą, PWA bus įdiegta jūsų įrenginyje.

Išplėstinės PWA funkcijos ir aspektai

Tiesioginiai pranešimai (Push Notifications)

Tiesioginiai pranešimai yra galingas būdas iš naujo įtraukti vartotojus į jūsų PWA. Norėdami įdiegti tiesioginius pranešimus, turėsite:

1. Gauti „Push API“ raktą: Jums reikės naudoti paslaugą, pvz., „Firebase Cloud Messaging“ (FCM) ar panašią, kad galėtumėte tvarkyti tiesioginius pranešimus. Tam reikia susikurti paskyrą ir gauti API raktą.
2. Užprenumeruoti vartotoją: Savo PWA turėsite paprašyti vartotojo leidimo gauti tiesioginius pranešimus ir tada užprenumeruoti jį savo tiesioginių pranešimų paslaugoje.
3. Apdoroti tiesioginius įvykius (Push Events): Savo „service worker“ faile turėsite klausytis tiesioginių įvykių ir rodyti pranešimą vartotojui.

Pavyzdys (supaprastintas - naudojant „Firebase“):

Jūsų `service-worker.js` faile:

// Importuojamos Firebase bibliotekos
importScripts('https://www.gstatic.com/firebasejs/9.6.11/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.6.11/firebase-messaging-compat.js');

// Inicijuojama Firebase
const firebaseConfig = {
  apiKey: "JŪSŲ_API_RAKTAS",
  authDomain: "JŪSŲ_AUTENTIFIKACIJOS_DOMENAS",
  projectId: "JŪSŲ_PROJEKTO_ID",
  storageBucket: "JŪSŲ_SAUGYKLOS_SEGMENTAS",
  messagingSenderId: "JŪSŲ_PRANEŠIMŲ_SIUNTĖJO_ID",
  appId: "JŪSŲ_PROGRAMĖLĖS_ID",
  measurementId: "JŪSŲ_MATAVIMO_ID"
};

firebase.initializeApp(firebaseConfig);

const messaging = firebase.messaging();

messaging.onBackgroundMessage(function(payload) {
  console.log('[firebase-messaging-sw.js] Gautas fono pranešimas ', payload);
  // Čia pritaikykite pranešimą
  const notificationTitle = 'Fono pranešimo pavadinimas';
  const notificationOptions = {
    body: 'Fono pranešimo tekstas.',
    icon: '/icon-512x512.png'
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

Svarbu: Pakeiskite rezervuotų vietų reikšmes savo tikraisiais „Firebase“ konfigūracijos duomenimis. Šis pavyzdys demonstruoja fono pranešimų tvarkymą. Prenumeratos logiką turėsite įdiegti savo pagrindiniame JavaScript kode.

Fono sinchronizavimas (Background Sync)

Fono sinchronizavimas leidžia jūsų PWA atlikti užduotis net tada, kai vartotojas yra neprisijungęs. Tai naudinga scenarijuose, kaip antai:

• Formų siuntimas: Leidžia vartotojams pateikti formas net tada, kai jie yra neprisijungę. „Service worker“ išsaugos formos duomenis ir pateiks juos, kai įrenginys vėl prisijungs prie tinklo.
• Duomenų atnaujinimas: Duomenų sinchronizavimas su serveriu fone.

Norėdami naudoti fono sinchronizavimą, turėsite užsiregistruoti `sync` įvykiui savo „service worker“ faile ir apdoroti sinchronizavimo logiką.

Neprisijungusio režimo palaikymo strategijos

Yra keletas strategijų, kaip teikti neprisijungusio režimo palaikymą jūsų PWA:

• Pirmiausia spartinančioji atmintinė (Cache First): Pirmiausia bandykite pateikti turinį iš spartinančiosios atmintinės. Jei turinio ten nėra, gaukite jį iš tinklo ir išsaugokite atmintinėje ateičiai. Tai strategija, naudojama aukščiau pateiktame pagrindiniame pavyzdyje.
• Pirmiausia tinklas (Network First): Pirmiausia bandykite gauti turinį iš tinklo. Jei tinklas nepasiekiamas, pateikite turinį iš spartinančiosios atmintinės. Tai naudinga dažnai atnaujinamam turiniui.
• Tik spartinančioji atmintinė (Cache Only): Pateikite turinį tik iš spartinančiosios atmintinės. Tai naudinga statiniams ištekliams, kurie retai keičiasi.
• Tik tinklas (Network Only): Pateikite turinį tik iš tinklo. Tai naudinga turiniui, kuris visada turi būti naujausias.

Geriausia strategija priklauso nuo konkrečių jūsų programėlės reikalavimų.

PWA atnaujinimai

„Service worker“ atnaujinimai yra esminė PWA priežiūros dalis. Kai naršyklė aptinka pakeitimą jūsų `service-worker.js` faile (net vieno baito pakeitimą), ji pradeda atnaujinimo procesą. Naujas „service worker“ įdiegiamas fone, bet jis neaktyvuojamas tol, kol vartotojas kitą kartą neapsilankys jūsų PWA arba kol nebus uždaryti visi esami skirtukai, kuriuos valdo senasis „service worker“.

Galite priversti atlikti neatidėliotiną atnaujinimą, iškviesdami `self.skipWaiting()` savo naujojo „service worker“ `install` įvykyje ir `clients.claim()` `activate` įvykyje. Tačiau tai gali sutrikdyti vartotojo patirtį, todėl naudokite atsargiai.

SEO aspektai PWA

PWA paprastai yra draugiškos SEO, nes iš esmės tai yra svetainės. Tačiau yra keletas dalykų, kuriuos reikia turėti omenyje:

• Užtikrinkite, kad jūsų PWA būtų atrandama: Įsitikinkite, kad jūsų svetainę gali nuskaityti paieškos sistemos.
• Naudokite semantinį HTML: Naudokite tinkamas HTML žymes savo turiniui struktūrizuoti.
• Optimizuokite mobiliesiems įrenginiams: Užtikrinkite, kad jūsų PWA būtų adaptyvi ir suteiktų gerą vartotojo patirtį mobiliuosiuose įrenginiuose.
• Naudokite aprašomuosius pavadinimus ir meta aprašymus: Padėkite paieškos sistemoms suprasti, apie ką yra jūsų PWA.
• Įdiekite struktūrinių duomenų žymėjimą: Pateikite paieškos sistemoms papildomos informacijos apie savo turinį.

Suderinamumas su įvairiomis naršyklėmis

Nors PWA yra pagrįstos žiniatinklio standartais, naršyklių palaikymas gali skirtis. Svarbu išbandyti savo PWA skirtingose naršyklėse ir įrenginiuose, kad įsitikintumėte, jog ji veikia teisingai. Naudokite funkcijų aptikimą, kad grakščiai sumažintumėte funkcionalumą naršyklėse, kurios nepalaiko tam tikrų funkcijų.

PWA derinimas (Debugging)

PWA derinimas gali būti sudėtingas dėl asinchroninio „service workers“ pobūdžio. Naudokite naršyklės kūrėjo įrankius, kad patikrintumėte „service worker“ registraciją, spartinančiąją atmintinę ir tinklo užklausas. Atidžiai stebėkite konsolės žurnalus ir klaidų pranešimus.

PWA pavyzdžiai visame pasaulyje

Daugybė įmonių visame pasaulyje sėkmingai įdiegė PWA. Štai keletas įvairių pavyzdžių:

• Twitter Lite: PWA, kuri taupo duomenis ir suteikia greitesnę patirtį esant lėtam ryšiui, ypač naudinga vartotojams besivystančiose šalyse.
• Starbucks: Siūlo meniu naršymą ir užsakymą neprisijungus, gerindama prieinamumą ir patogumą klientams visame pasaulyje.
• Tinder: PWA lėmė greitesnį įkėlimo laiką ir didesnį įsitraukimą, pasiekdama platesnę auditoriją nepriklausomai nuo tinklo sąlygų.
• AliExpress: Pagerino konversijų rodiklius ir vartotojų įsitraukimą, siūlydama įdiegiamą, programėlei panašią patirtį tiesiai iš žiniatinklio.
• MakeMyTrip (Indija): PWA, kuri žymiai padidino konversijų rodiklius ir sumažino puslapių įkėlimo laiką, spręsdama nenuoseklaus interneto ryšio iššūkius regione.

Išvada: pasitinkant žiniatinklio ateitį

Progresyviosios žiniatinklio programėlės siūlo patrauklią alternatyvą tradicinėms svetainėms ir savosioms mobiliosioms programėlėms. Jos suteikia geresnę vartotojo patirtį, pagerintą našumą ir didesnį įsitraukimą, todėl yra vertingas įrankis įmonėms, siekiančioms pasiekti pasaulinę auditoriją. Suprasdami pagrindines koncepcijas ir vadovaudamiesi šiame vadove pateiktais diegimo žingsniais, programuotojai gali sukurti PWA, kurios yra patikimos, įdiegiamos ir įtraukiančios, suteikdamos konkurencinį pranašumą šiandieniniame, į mobiliuosius įrenginius orientuotame pasaulyje. Pasitikite žiniatinklio ateitį ir pradėkite kurti savo progresyviąsias žiniatinklio programėles jau šiandien!